// 管理系统级别的UI配置和显示设置，允许用户自定义界面外观和行为。

const state = {
  theme: '#409EFF', // 系统主题色（默认Element UI蓝色）
  navbarStyle: 'light', // 导航栏风格：light/dark/custom等
  fixedHeader: true, // 是否固定顶部导航栏（不随页面滚动）
  showSettings: false, // 是否显示设置面板（通常用于显示/隐藏设置抽屉）
  showFooter: true // 是否显示底部版权
}

const mutations = {
  /**
   * 安全地修改系统设置项
   * @param {Object} state - 模块状态
   * @param {Object} payload - 包含要修改的键值对
   * @param {string} payload.key - 要修改的设置项名称
   * @param {*} payload.value - 新的设置值
   */

  CHANGE_SETTING: (state, { key, value }) => {
    // 修改为使用 Object.prototype.hasOwnProperty.call
    // 使用安全的属性检查方式，避免原型链污染
    if (Object.prototype.hasOwnProperty.call(state, key)) {
      state[key] = value
    }
  }
}

const actions = {
  /**
   * 提交设置变更（业务逻辑层）
   * @param {Function} commit - Vuex commit方法
   * @param {Object} data - 同mutations中的payload
   */
  changeSetting ({ commit }, data) {
    commit('CHANGE_SETTING', data)
  }
}

const getters = {
  currentTheme: state => state.theme, // 获取当前主题色
  navbarStyle: state => state.navbarStyle, // 获取导航栏样式
  isFixedHeader: state => state.fixedHeader, // 获取顶部导航固定状态
  shouldShowSettings: state => state.showSettings, // 获取设置面板显示状态
  shouldShowFooter: state => state.showFooter // 获取底部版权显示状态
}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}
